<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单版面向对象选项卡</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,ol,li{
            list-style: none;
        }

        .tab{
            width: 600px;
            height: 400px;
            border: 10px solid #333;
            margin: 50px auto;
            display: flex;
            flex-direction: column;
        }

        ul{
            height: 60px;
            display: flex;
        }

        ul>li{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 40px;
            color: #fff;
            background-color: skyblue;
            cursor: pointer;
        }

        ul>li.active{
            background-color: orange;
        }

        ol{
            flex: 1;
            position: relative;
        }
        
        ol>li{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            font-size: 100px;
            color: #fff;
            background-color: purple;
            display: flex;
            justify-content: center;
            align-items: center;
            display: none;
        }

        ol>li.active{
            display: flex;
        }
        
    </style>
</head>
<body>
    <div class="tab" id="box">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>


    <div class="tab" id="box2">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
    </div>

    <script>
        /*
        1.抽象内容
          + 一个能够完成选项卡的对象，需要有哪些属性和方法
          + 属性：所有可以点击的按钮盒子
          + 属性：所有可以切换的选项盒子
          + 方法：能添加点击事件的方法
        2.书写构造函数
          + 能创建一个对象，包含两个属性和一个方法
          + 属性直接写在构造函数体内
          + 方法写在构造函数的原型上
        */

        // 2.书写构造函数
        function Tabs(ele){
            // 范围
            this.ele = document.querySelector(ele)
            // 在范围内找到所有可以点击的盒子
            this.btns = this.ele.querySelectorAll('ul>li')
            // 在范围内找到所有需要切换显示的盒子
            this.tabs = this.ele.querySelectorAll('ol>li')

        }

        // 原型上写方法
        Tabs.prototype.change = function(){
            // 执行给所有 btns 里面的按钮添加点击事件
            // 我怎么拿到btns
            // 绝对不能直接使用t这个变量
            // console.log(t.btns)
            // console.log(this.btns)

            // 提前保存一下 this
            var _this = this

            for(var i = 0; i < this.btns.length; i++){
                // 提前保存索引
                this.btns[i].setAttribute('index',i)

                // 第一种点击事件的写法
                // this.btns[i].addEventListener('click',function(){
                //     console.log('我被点击了')
                // })
                // 第二种点击事件的写法
                this.btns[i].onclick = function(){
                    console.log('我被点击了')
                    // 需要让实例的 btns 里面的每一个没有 active 类名
                    // 需要让实例的 tabs 里面的每一个没有 active 类名
                    // 这里不是在 change 函数的作用域了，而是事件处理函数的作用域
                    // 在事件处理函数里面，this 指向当前事件的事件源
                    // console.log(_this)
                    // 当你访问 _this 的时候，其实是在访问变量
                    // 自己作用域没有，就会去上一级作用域查找
                    for(var j = 0; j < _this.btns.length; j++){
                        _this.btns[j].className = ''
                        _this.tabs[j].className = ''
                    }

                    // 当前点击的这个 li 有 active 类名
                    this.className = 'active'
                    // 让实例身上的 tabs 里面索引对应的哪一个 li 有 active 类名
                    // 拿到当前 li 身上保存的索引
                    var index = this.getAttribute('index') - 0
                    _this.tabs[index].className = 'active'
                }
            }
        }

        // 使用的时候
        // 选项卡就可以使用了
        var t = new Tabs('#box')
        // 实例对象在调用方法
        // 函数调用方式，对象.函数名（）
        // 函数内部的 this 就是指向 点 前面的 xxx
        // 我在change 函数里面写的 this 就是这个 t
        t.change()
        console.log(t)


        // 实现第二个选项卡
        var t2 = new Tabs('#box2')
        t2.change()
    </script>
</body>
</html>